<template>
    <div class="trash_model">
        <div class="top_panel">
            <div class="search_box">
                <i class="el-icon-search"></i>
                <input type="text" placeholder="搜索标题/正文/创始人">
            </div>
            <div class="user_area">
                <span @click="userInfo('qs')"><i class="el-icon-question"></i></span>
                <span @click="userInfo('ms')"><i class="el-icon-message-solid"></i></span>
                <span @click="userInfo('us')"><i class="el-icon-user-solid"></i></span>
            </div>
        </div>
        <div class="content_panel">
            <!-- 快捷方式文档 -->
            <!--            <div class="shortcut_doc_list">-->
            <!--                <div class="short_title">-->
            <!--                    <span class="pull-left">快捷方式文档</span>-->
            <!--                    <span class="pull-right"><i class="el-icon-s-fold"></i></span>-->
            <!--                </div>-->
            <!--                <div class="short_list">-->
            <!--                    <ul>-->
            <!--                        <li v-for="(item,index) in shortcutList" :key="index" @click="open">-->
            <!--                            <span class="list_img">-->
            <!--                                <img src="./images/全屏表格-编辑@2x.png" alt="">-->
            <!--                            </span>-->
            <!--                            <span class="list_title">-->
            <!--                                <img data-v-afa1be52="" src="/img/全屏表格-编辑@2x.74c6ea72.png" width="12" height="14" alt="">-->
            <!--                                <i class="el-icon-star-on"></i>-->
            <!--                                <span>{{item.title}}</span>-->
            <!--                                <p class=""></p>-->
            <!--                            </span>-->
            <!--                        </li>-->
            <!--                    </ul>-->
            <!--                </div>-->
            <!--            </div>-->
            <!-- 所有文档 -->
            <div class="all_doc_list">
                <div class="all_title">
                    <span class="pull-left">所有文档</span>
                    <span class="pull-right"><i class="el-icon-s-fold"></i></span>
                </div>
                <div class="operate_box">
                    <ul>
                        <li>
                            <!--                            <span>操作</span><i class="el-icon-caret-bottom"></i>-->
                            <el-dropdown @command="handleCommand">
                              <span class="el-dropdown-link">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="c">移入回收站</el-dropdown-item>
                                    <!--                                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>-->
                                    <!--                                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
                                </el-dropdown-menu>
                            </el-dropdown>
                        </li>
                    </ul>
                </div>
                <div class="all_table">
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                              style="width: 100%"
                              @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="title" label="名称" width="300"></el-table-column>
                        <el-table-column prop="user_id" label="所有者" width="300"></el-table-column>
                        <el-table-column label="最后更新时间">
                            <template slot-scope="scope">{{ scope.row.updated_at }}</template>
                        </el-table-column>
                        <el-table-column label="" width="50px">
                            <template>
                                <p class="oprate"></p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-pagination
                    small
                    layout="prev, pager, next"
                    @current-change="pageChange"
                    :total="50">
                </el-pagination>
            </div>
        </div>
        <!--回收站二次弹窗-->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <span>确认移出回收站？</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="gotoRubbish">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from "../../../public/api/api";
export default {
    name: 'trash',
    data() {
            return {
                multipleSelection:[],
                dialogVisible: false,
                currentPage:1,
                activeId:'',
                tableData: [],
                total:1
            }
    },
    mounted() {
        this.getDataList()
    },
    methods: {
        pageChange(val){
            this.currentPage=val;
            this.getDataList()
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        getDataList(){
            var that=this;
            api.post('get','/api/project/trash/list?page='+that.currentPage,)
                .then(function (response) {
                    console.log(response)
                    if(response.data.code==200){
                        that.tableData=response.data.data;
                        that.total=response.data.meta.total;
                    }else{
                        that.$message({
                            message:response.data.message,
                            type: 'warn'
                        });
                    }

                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        gotoRubbish(){
            var that=this;
            api.post('post','/api/project/restore',{pid:that.multipleSelection[0].id})
                .then(function (response) {
                    console.log(response)
                    if(response.data.code==200){
                        that.$message({
                            message: '移出成功！',
                            type: 'success'
                        });
                        that.getDataList();
                    }else{
                        that.$message({
                            message:response.data.message,
                            type: 'warn'
                        });
                    }
                    this.dialogVisible=false;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        handleCommand(command) {
            //this.$message('click on item ' + command);
            if(this.multipleSelection.length==0){
                this.$message('请选择一个项目进行操作');
                return
            }else if(this.multipleSelection.length>1){
                this.$message('只能选择一个项目进行操作');
                return
            }
            if(command=='a'){
                this.dialogVisible=true;
            }else if(command=='b'){
                this.dialogVisible=true;
            }else{
                console.log(command)
                this.dialogVisible=true;
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        open() {
            this.$message({
                message: '恭喜，你打开了一个表格',
                type: 'success'
            });
        },
        userInfo() {
            this.$router.push("/login")
        }
    },
}
</script>

<style lang="less" scoped>
@import url('./css/trash.less');
</style>
